<template>
  <div class="movie-thum" @click="showDetail(movie.id)">
    <img :src="movie.movieImg" mode="scaleToFill" class="movie-img">
    <h3 class="movie-name">{{movie.movieName}}</h3>
    <div class="rate-div" v-if="movie.rate === 0 || movie.rate">
      <i-rate :value="movie.rate / 2" i-class="movie-rate" size="12" :disabled="true" ></i-rate>
      <span class="rate">{{movie.rate}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    movie: {
      type: Object
    }
  },
  methods: {
    showDetail (id) {
      wx.navigateTo({
        url: '/pages/movie-detail/main?id=' + id
      })
    }
  }
}
</script>

<style lang="less">
.movie-thum {
  width: 210rpx;
  height: 350rpx;
  position: relative;
  .movie-img {
    width: 100%;
    height: 280rpx;
  }
  .movie-name {
    font-size: 14px;
    font-weight: 600;
    color: #181818;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .rate-div {
    width: 100%;
    position: absolute;
    bottom: -40rpx;
    text-align: center;
    .rate {
      font-size: 12px;
      display: inline-block;
      height: 26px;
      vertical-align:sub;
      color: #7b7b7b;
    }
  }
}
</style>

